import React, { useState } from "react";
import { Avatar, Button, Dropdown, Layout, theme } from "antd";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
const { Header } = Layout;

const TopHeader = () => {
  const navigation = useNavigate();
  const userInfo = localStorage.getItem("token");
  const { username } = JSON.parse(userInfo);
  const items = [
    {
      key: "1",
      label: <span>{username}</span>,
    },
    {
      key: "2",
      danger: true,
      label: (
        <span
          onClick={() => {
            localStorage.removeItem("token");
            navigation("/login", { replace: true });
          }}
        >
          退出登錄
        </span>
      ),
    },
  ];
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  return (
    <Header
      style={{
        padding: "0 16px",
        background: colorBgContainer,
      }}
    >
      <Button
        type="text"
        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        onClick={() => setCollapsed(!collapsed)}
        style={{
          fontSize: "16px",
          width: 64,
          height: 64,
        }}
      />
      <div style={{ float: "right" }}>
        <Dropdown
          menu={{
            items,
          }}
          placement="bottomRight"
          arrow
        >
          <div>
            <span>欢迎回来{username}</span>
            <Avatar size="large" icon={<UserOutlined />} />
          </div>
        </Dropdown>
      </div>
    </Header>
  );
};

export default TopHeader;
